<!doctype html>
<html lang="zh"><head>
<title>webpack-vueCli4全面配置 - 糖羽仙</title>
<meta charset="UTF-8">
<meta name="keywords" content="blog ACG JavaScript VUE IT">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<link rel="shortcut icon" href="/images/head/head.jpg" type="image/jpeg" />
<meta name="description" content="细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack-vueCli4全面配置">
<meta property="og:url" content="https://www.tangyuxian.com/2021/04/13/%E5%89%8D%E7%AB%AF/webpack/webpack-vueCli4%20%E5%85%A8%E9%9D%A2%E9%85%8D%E7%BD%AE/index.html">
<meta property="og:site_name" content="糖羽仙">
<meta property="og:description" content="细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-04-13T03:51:10.000Z">
<meta property="article:modified_time" content="2022-12-05T05:48:33.609Z">
<meta property="article:author" content="tangyuxian">
<meta property="article:tag" content="转载">
<meta property="article:tag" content="webpack">
<meta name="twitter:card" content="summary">

<link rel="stylesheet" href="/lib/fancybox/fancybox.css">
<link rel="stylesheet" href="/lib/mdui_043tiny/mdui.css">


<link rel="stylesheet" href="/lib/iconfont/iconfont.css?v=1763992124148">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_8z08qcz5sq3.css">

<link rel="stylesheet" href="/css/style.css?v=1763992124148">




    
        <link rel="stylesheet" href="/custom.css?v=1763992124148">
    
        <link rel="stylesheet" href="/themes/umaru/index.css?v=1763992124148">
    
        <link rel="stylesheet" href="/themes/asuka/index.css?v=1763992124148">
    



<script src="/lib/mdui_043tiny/mdui.js" async></script>
<script src="/lib/fancybox/fancybox.umd.js" async></script>
<script src="/lib/lax.min.js" async></script>


<script async src="/js/app.js?v=1763992124148"></script>

 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1Z7TFL96ZH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-1Z7TFL96ZH');
</script>


<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css">
<style>:root{--hl-color:#e1e4e8;--hl-bg:#24292e;--hltools-bg:#1f2428;--hltools-color:#c5c5c5;--hlnumber-bg:#24292e;--hlnumber-color:#444d56;--hlscrollbar-bg:#32383e;--hlexpand-bg:linear-gradient(180deg,rgba(36,41,46,0.1),rgba(36,41,46,0.9))}</style><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body class="nexmoe mdui-drawer-body-left"><div id="nexmoe-background"><div class="nexmoe-bg" style="background-image: url(/images/background/xiaomai.jpg)"></div><div class="nexmoe-character"></div><div class="mdui-appbar mdui-shadow-0"><div class="mdui-toolbar"><a class="mdui-btn mdui-btn-icon mdui-ripple" mdui-drawer="{target: &#039;#drawer&#039;, swipe: true}" title="menu"><i class="mdui-icon nexmoefont icon-menu"></i></a><div class="mdui-toolbar-spacer"></div><a class="mdui-btn mdui-btn-icon" href="/" title="tangyuxian"><img src="/images/head/head.jpg" alt="tangyuxian"></a></div></div></div><div id="nexmoe-header"><div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="tangyuxian">
            <img src="/images/head/head.jpg" alt="tangyuxian" alt="tangyuxian">
        </a>
    </div>
    <div class="nexmoe-count">
        <div class="nexmoe-count-item"><span>文章</span>84 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div class="nexmoe-count-item"><span>标签</span>38<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div class="nexmoe-count-item"><span>分类</span>5<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/about.html" title="关于糖糖">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于糖糖
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
    </div>
    
    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search">
         
            <form id="search_form" action_e="https://cn.bing.com/search?q=site:tangyuxian.com" onsubmit="return search();">
                <label><input id="search_value" name="q" type="search" placeholder="搜索"></label>
            </form>
         
    </div>
</div>




    
        
        <div class="nexmoe-widget-wrap">
	<div class="nexmoe-widget nexmoe-social">
		<a
			class="mdui-ripple"
			href="http://wpa.qq.com/msgrd?v=3&uin=2120252100&site=qq&menu=yes"
			target="_blank"
			mdui-tooltip="{content: 'QQ'}"
			style="
				color: rgb(64, 196, 255);
				background-color: rgba(64, 196, 255, .1);
			"
		>
			<i
				class="nexmoefont icon-QQ"
			></i> </a
		><a
			class="mdui-ripple"
			href="mailto:tangyuxian@vip.qq.com"
			target="_blank"
			mdui-tooltip="{content: 'mail'}"
			style="
				color: rgb(249,8,8);
				background-color: rgba(249,8,8,.1);
			"
		>
			<i
				class="nexmoefont icon-mail-fill"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://blog.csdn.net/qq_40621378?type=blog"
			target="_blank"
			mdui-tooltip="{content: 'CSDN'}"
			style="
				color: rgb(199,29,35);
				background-color: rgba(199,29,35,.1);
			"
		>
			<i
				class="nexmoefont icon-csdn"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://www.cnblogs.com/lovetangyuxian/"
			target="_blank"
			mdui-tooltip="{content: '博客园'}"
			style="
				color: rgb(66, 214, 29);
				background-color: rgba(66, 214, 29, .1);
			"
		>
			<i
				class="nexmoefont icon-bokeyuan"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://github.com/tangyuxian/"
			target="_blank"
			mdui-tooltip="{content: 'GitHub'}"
			style="
				color: rgb(25, 23, 23);
				background-color: rgba(25, 23, 23, .15);
			"
		>
			<i
				class="nexmoefont icon-github"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://gitee.com/tangyuxian"
			target="_blank"
			mdui-tooltip="{content: 'gitee'}"
			style="
				color: rgb(255, 255, 255);
				background-color: rgb(199,29,35);
			"
		>
			<i
				class="nexmoefont icon-mayun"
			></i> </a
		>
	</div>
</div>

    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/其它/">其它</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/前端/">前端</a>
          <span class="category-list-count">62</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/后端/">后端</a>
          <span class="category-list-count">8</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/开发工具/">开发工具</a>
          <span class="category-list-count">11</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/服务器端/">服务器端</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


    
        
        
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/JavaScript/" style="font-size: 15.56px;">JavaScript</a> <a href="/tags/Jetbrains/" style="font-size: 10px;">Jetbrains</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/UI%E5%BA%93/" style="font-size: 13.33px;">UI库</a> <a href="/tags/centos/" style="font-size: 10px;">centos</a> <a href="/tags/css/" style="font-size: 11.11px;">css</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/echarts/" style="font-size: 10px;">echarts</a> <a href="/tags/elementPlus/" style="font-size: 13.33px;">elementPlus</a> <a href="/tags/es6/" style="font-size: 14.44px;">es6</a> <a href="/tags/git/" style="font-size: 13.33px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 13.33px;">http</a> <a href="/tags/java/" style="font-size: 11.11px;">java</a> <a href="/tags/markerdown/" style="font-size: 11.11px;">markerdown</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/node/" style="font-size: 13.33px;">node</a> <a href="/tags/vite/" style="font-size: 10px;">vite</a> <a href="/tags/vue/" style="font-size: 18.89px;">vue</a> <a href="/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/tags/xuex/" style="font-size: 10px;">xuex</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E6%B5%81/" style="font-size: 10px;">事件流</a> <a href="/tags/%E4%BA%92%E8%81%94%E7%BD%91/" style="font-size: 10px;">互联网</a> <a href="/tags/%E5%8A%A0%E5%AF%86/" style="font-size: 12.22px;">加密</a> <a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 20px;">原创</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 13.33px;">工具</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 12.22px;">微信小程序</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.33px;">总结</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 10px;">服务器</a> <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" style="font-size: 17.78px;">浏览器</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 14.44px;">算法</a> <a href="/tags/%E7%BC%96%E8%A7%A3%E7%A0%81/" style="font-size: 10px;">编解码</a> <a href="/tags/%E7%BE%8E%E5%8C%96/" style="font-size: 12.22px;">美化</a> <a href="/tags/%E8%A7%86%E9%A2%91/" style="font-size: 11.11px;">视频</a> <a href="/tags/%E8%AE%B0%E5%BD%95/" style="font-size: 11.11px;">记录</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 16.67px;">转载</a>
    </div>
    
      <script>
        var maxTagcloud = parseInt(17);
        var tags_length = parseInt(38);
        var tags_arr = [];
        for(var i = 0; i < tags_length; i++){
          tags_arr.push(i);
        }
        tags_arr.sort(function (l, r) {
          return Math.random() > 0.5 ? -1 : 1;
        });
        tags_arr = tags_arr.slice(0, maxTagcloud < tags_length ? tags_length - maxTagcloud : 0);
        for(var tag_i = 0; tag_i < tags_arr.length; tag_i++){
          document.getElementById("randomtagcloud").children[tags_arr[tag_i]].style.display = 'none';
        }
      </script>
    
  </div>

    
        
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2025/">2025</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/">2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">23</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">54</span></li></ul>
    </div>
  </div>



    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">最新文章</h3>
    <div class="nexmoe-widget">
      <ul>
        
          <li>
            <a href="/2025/11/12/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E7%BE%8E%E5%8C%96/%E7%BE%8E%E5%8C%96-%E7%BD%91%E9%A1%B5%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2%E7%9A%84%E6%B8%90%E5%8F%98%E5%8A%A8%E7%94%BB/">美化-网页主题切换的渐变动画</a>
          </li>
        
          <li>
            <a href="/2025/09/29/%E5%89%8D%E7%AB%AF/css/css-%E8%A1%A8%E6%A0%BCtd%E4%B8%8B%E9%AB%98%E5%BA%A6%E4%B8%A2%E5%A4%B1%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/">css-表格td下高度丢失解决办法</a>
          </li>
        
          <li>
            <a href="/2025/09/23/%E5%89%8D%E7%AB%AF/vue/vue-%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0%E5%BC%8F%E8%A7%A6%E5%8F%91%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95/">vue-封装函数式触发右键菜单组件</a>
          </li>
        
          <li>
            <a href="/2025/06/04/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-ElTooltip%E5%8F%AA%E5%9C%A8%E6%96%87%E5%AD%97%E8%B6%85%E5%87%BA%E8%8C%83%E5%9B%B4%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E8%A7%86%E7%BA%BF%E6%96%B9%E5%BC%8F/">UI库-ElTooltip只在文字超出范围时显示的视线方式</a>
          </li>
        
          <li>
            <a href="/2025/05/29/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88/">UI库-封装PageTable总览</a>
          </li>
        
      </ul>
    </div>
  </div>

    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-link">
		<ul>
        
            <li>
                <a href="https://tangyuxian.com/" target="_blank" >
                    <img src="https://cdn.tangyuxian.com/PicGoImages/202304272004917.jpg" alt="糖糖第一可爱"></img>
                    <p style="color: var(--color-primary)">糖糖第一可爱</p>
                </a>
            </li>
        
		</ul>
    </div>
</div>
<style>
.nexmoe-widget-wrap .nexmoe-link ul li a {
    text-align : center;
}
.nexmoe-widget-wrap .nexmoe-link ul li a img {
    max-width : 100%;
}
.nexmoe-widget-wrap .nexmoe-link ul li a p {
    margin: 10px 0;
}
</style>

    
   
    <div class="nexmoe-copyright">
        &copy; 2025 tangyuxian
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/tangyuxian/hexo-theme-tangyuxian" target="_blank">Tangyuxian</a>
        <br><a target="_blank" href="https://beian.miit.gov.cn/">辽ICP备2021002341号</a>
<div style="font-size: 12px">
   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
   本站访客数<a id="busuanzi_value_site_uv"></a>人次
</div>

    </div>
</div><!-- .nexmoe-drawer --></div><div id="nexmoe-content"><div class="nexmoe-primary"><div class="nexmoe-post">
  <article>
    
        <div class="nexmoe-post-cover">
            <img src="/images/post/webpack.jpg" alt="webpack-vueCli4全面配置" loading="lazy">
            <h1>webpack-vueCli4全面配置</h1>
        </div>
        
    
    <div class="nexmoe-post-meta">
    <div class="nexmoe-rainbow">
        <a class="nexmoefont icon-calendar-fill">2021年04月13日</a>
        
            <a class="nexmoefont icon-appstore-fill -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        
        
    </div>
    
    
    
    
    
</div>

    <p>细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。</p>
<span id="more"></span>

<h1 id="vue-cli4-全面配置"><a href="#vue-cli4-全面配置" class="headerlink" title="vue-cli4 全面配置"></a>vue-cli4 全面配置</h1><p><span id="top">目录</span></p>
<ul>
<li><a href="#env">√ 配置多环境变量</a></li>
<li><a href="#base">√ 配置基础 vue.config.js</a></li>
<li><a href="#proxy">√ 配置 proxy 跨域</a></li>
<li><a href="#hmr">√ 修复 HMR(热更新)失效</a></li>
<li><a href="#lazyloading">√ 修复 Lazy loading routes Error： Cyclic dependency</a></li>
<li><a href="#alias">√ 添加别名 alias</a></li>
<li><a href="#compressimage">√ 压缩图片</a></li>
<li><a href="#spritesmith">√ 自动生成雪碧图</a></li>
<li><a href="#font">√ SVG 转 font 字体</a></li>
<li><a href="#svg">√ 使用 SVG 组件</a></li>
<li><a href="#removecss">√ 去除多余无效的 css</a></li>
<li><a href="#analyze">√ 添加打包分析</a></li>
<li><a href="#externals">√ 配置 externals 引入 cdn 资源</a></li>
<li><a href="#multiple-pages">√ 多页面打包 multi-page</a></li>
<li><a href="#moment">√ 删除 moment 语言包</a></li>
<li><a href="#log">√ 去掉 console.log</a></li>
<li><a href="#splitchunks">√ 利用 splitChunks 单独打包第三方模块</a></li>
<li><a href="#gzip">√ 开启 gzip 压缩</a></li>
<li><a href="#stylelint">√ 开启 stylelint 检测scss, css语法</a></li>
<li><a href="#globalscss">√ 为 sass 提供全局样式，以及全局变量</a></li>
<li><a href="#globalstylus">√ 为 stylus 提供全局变量</a></li>
<li><a href="#prerender">√ 预渲染 prerender-spa-plugin</a></li>
<li><a href="#ie">√ 添加 IE 兼容</a></li>
<li><a href="#alioss">√ 静态资源自动打包上传阿里 oss、华为 obs</a></li>
<li><a href="#allconfig">√ 完整依赖</a></li>
</ul>
<h3 id="✅-配置多环境变量"><a href="#✅-配置多环境变量" class="headerlink" title="✅ 配置多环境变量"></a><span id="env">✅ 配置多环境变量</span></h3><p>&emsp;&emsp;通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境</p>
<p>&emsp;&emsp;只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE_APP_BASE_API 访问</p>
<p>&emsp;&emsp;NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用</p>
<h5 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h5><p>&emsp;&emsp;在项目根目录中新建.env, .env.production, .env.analyz 等文件</p>
<ul>
<li>.env</li>
</ul>
<p>&emsp;&emsp;serve 默认的本地开发环境配置</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;development&quot;</span></span>
<span class="line"><span style="color: #79B8FF">BASE_URL</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_API</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://test.staven630.com/api&quot;</span></span></code></pre></div></div></figure>

<ul>
<li>.env.production</li>
</ul>
<p>&emsp;&emsp;build 默认的环境配置（正式服务器）</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;production&quot;</span></span>
<span class="line"><span style="color: #79B8FF">BASE_URL</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://prod.staven630.com/&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://prod.oss.com/staven-blog&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_API</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://prod.staven630.com/api&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">ACCESS_KEY_ID</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;xxxxxxxxxxxxx&quot;</span></span>
<span class="line"><span style="color: #79B8FF">ACCESS_KEY_SECRET</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;xxxxxxxxxxxxx&quot;</span></span>
<span class="line"><span style="color: #79B8FF">REGION</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;oss-cn-hangzhou&quot;</span></span>
<span class="line"><span style="color: #79B8FF">BUCKET</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;staven-prod&quot;</span></span>
<span class="line"><span style="color: #79B8FF">PREFIX</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;staven-blog&quot;</span></span></code></pre></div></div></figure>

<ul>
<li>.env.crm</li>
</ul>
<p>&emsp;&emsp;自定义 build 环境配置（预发服务器）</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;production&quot;</span></span>
<span class="line"><span style="color: #79B8FF">BASE_URL</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://crm.staven630.com/&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://crm.oss.com/staven-blog&quot;</span></span>
<span class="line"><span style="color: #79B8FF">VUE_APP_API</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;https://crm.staven630.com/api&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">ACCESS_KEY_ID</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;xxxxxxxxxxxxx&quot;</span></span>
<span class="line"><span style="color: #79B8FF">ACCESS_KEY_SECRET</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;xxxxxxxxxxxxx&quot;</span></span>
<span class="line"><span style="color: #79B8FF">REGION</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;oss-cn-hangzhou&quot;</span></span>
<span class="line"><span style="color: #79B8FF">BUCKET</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;staven-crm&quot;</span></span>
<span class="line"><span style="color: #79B8FF">PREFIX</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;staven-blog&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">IS_ANALYZE</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;修改 package.json</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #9ECBFF">&quot;scripts&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;build&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;vue-cli-service build&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;crm&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;vue-cli-service build --mode crm&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<h5 id="使用环境变量"><a href="#使用环境变量" class="headerlink" title="使用环境变量"></a>使用环境变量</h5><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;home&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;!-- template中使用环境变量 --&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">     API: {{ api }}</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">export default {</span></span>
<span class="line"><span style="color: #E1E4E8">  name: </span><span style="color: #9ECBFF">&quot;home&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">data</span><span style="color: #E1E4E8">() {</span></span>
<span class="line"><span style="color: #E1E4E8">    return {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">api</span><span style="color: #E1E4E8">: process.env.</span><span style="color: #79B8FF">VUE_APP_API</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">mounted</span><span style="color: #E1E4E8">() {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// js代码中使用环境变量</span></span>
<span class="line"><span style="color: #E1E4E8">    console.log(</span><span style="color: #9ECBFF">&quot;BASE_URL: &quot;</span><span style="color: #E1E4E8">, process.env.BASE_URL);</span></span>
<span class="line"><span style="color: #E1E4E8">    console.log(</span><span style="color: #9ECBFF">&quot;VUE_APP_API: &quot;</span><span style="color: #E1E4E8">, process.env.VUE_APP_API);</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-配置基础-vue-config-js"><a href="#✅-配置基础-vue-config-js" class="headerlink" title="✅ 配置基础 vue.config.js"></a><span id="base">✅ 配置基础 vue.config.js</span></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  publicPath: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> process.env.</span><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 默认&#39;/&#39;，部署应用包时的基本 URL</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// outputDir: process.env.outputDir || &#39;dist&#39;, // &#39;dist&#39;, 生产环境构建文件的目录</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// assetsDir: &quot;&quot;, // 相对于outputDir的静态资源(js、css、img、fonts)目录</span></span>
<span class="line"><span style="color: #E1E4E8">  lintOnSave: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  runtimeCompiler: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 是否使用包含运行时编译器的 Vue 构建版本</span></span>
<span class="line"><span style="color: #E1E4E8">  productionSourceMap: </span><span style="color: #F97583">!</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生产环境的 source map</span></span>
<span class="line"><span style="color: #E1E4E8">  parallel: </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;os&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">cpus</span><span style="color: #E1E4E8">().</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  pwa: {}</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;proxy&quot;&gt;✅ 配置 proxy 代理解决跨域问题&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;假设 mock 接口为https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets/1</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  devServer: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// overlay: { // 让浏览器 overlay 同时显示警告和错误</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   warnings: true,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   errors: true</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// },</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// open: false, // 是否打开浏览器</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// host: &quot;localhost&quot;,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// port: &quot;8080&quot;, // 代理断就</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// https: false,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// hotOnly: false, // 热更新</span></span>
<span class="line"><span style="color: #E1E4E8">    proxy: {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;/api&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">        target:</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #9ECBFF">&quot;https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 目标代理接口地址</span></span>
<span class="line"><span style="color: #E1E4E8">        secure: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        changeOrigin: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 开启代理，在本地创建一个虚拟服务端</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// ws: true, // 是否启用websockets</span></span>
<span class="line"><span style="color: #E1E4E8">        pathRewrite: {</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #9ECBFF">&quot;^/api&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;/&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;访问</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">import axios from &quot;axios&quot;;</span></span>
<span class="line"><span style="color: #E1E4E8">export default {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">mounted</span><span style="color: #E1E4E8">() {</span></span>
<span class="line"><span style="color: #E1E4E8">    axios.get(</span><span style="color: #9ECBFF">&quot;/api/1&quot;</span><span style="color: #E1E4E8">).then(res =&gt; {</span></span>
<span class="line"><span style="color: #E1E4E8">      console.log(</span><span style="color: #9ECBFF">&#39;proxy:&#39;</span><span style="color: #E1E4E8">, res);</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/script</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-修复-HMR-热更新-失效"><a href="#✅-修复-HMR-热更新-失效" class="headerlink" title="✅ 修复 HMR(热更新)失效"></a><span id="hmr">✅ 修复 HMR(热更新)失效</span></h3><p>&emsp;&emsp;如果热更新失效，如下操作：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 修复HMR</span></span>
<span class="line"><span style="color: #E1E4E8">    config.resolve.</span><span style="color: #B392F0">symlinks</span><span style="color: #E1E4E8">(</span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-修复-Lazy-loading-routes-Error：-Cyclic-dependency-https-github-com-vuejs-vue-cli-issues-1669"><a href="#✅-修复-Lazy-loading-routes-Error：-Cyclic-dependency-https-github-com-vuejs-vue-cli-issues-1669" class="headerlink" title="✅ 修复 Lazy loading routes Error： Cyclic dependency https://github.com/vuejs/vue-cli/issues/1669"></a><span id="lazyloading">✅ 修复 Lazy loading routes Error： Cyclic dependency</span> <a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-cli/issues/1669">https://github.com/vuejs/vue-cli/issues/1669</a></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中</span></span>
<span class="line"><span style="color: #E1E4E8">    config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">tap</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">args</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 修复 Lazy loading routes Error</span></span>
<span class="line"><span style="color: #E1E4E8">      args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].chunksSortMode </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;none&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> args;</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-添加别名-alias"><a href="#✅-添加别名-alias" class="headerlink" title="✅ 添加别名 alias"></a><span id="alias">✅ 添加别名 alias</span></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 添加别名</span></span>
<span class="line"><span style="color: #E1E4E8">    config.resolve.alias</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;vue$&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;vue/dist/vue.esm.js&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@assets&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/assets&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@scss&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/assets/scss&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@components&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/components&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@plugins&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/plugins&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@views&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/views&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@router&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/router&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@store&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/store&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@layouts&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/layouts&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@static&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/static&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;compressimage&quot;&gt;✅ 压缩图片&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #E1E4E8">npm i </span><span style="color: #F97583">-</span><span style="color: #79B8FF">D</span><span style="color: #E1E4E8"> image</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">webpack</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">loader</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;在某些版本的 OSX 上安装可能会因缺少 libpng 依赖项而引发错误。可以通过安装最新版本的 libpng 来解决。</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #E1E4E8">brew install libpng</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.module</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;image-webpack-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">loader</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;image-webpack-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          mozjpeg: { progressive: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, quality: </span><span style="color: #79B8FF">65</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          optipng: { enabled: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          pngquant: { quality: [</span><span style="color: #79B8FF">0.65</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">0.9</span><span style="color: #E1E4E8">], speed: </span><span style="color: #79B8FF">4</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          gifsicle: { interlaced: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8"> }</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #6A737D">// webp: { quality: 75 }</span></span>
<span class="line"><span style="color: #E1E4E8">        });</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;spritesmith&quot;&gt;✅ 自动生成雪碧图&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;默认 src/assets/icons 中存放需要生成雪碧图的 png 文件。首次运行 npm run serve/build 会生成雪碧图，并在跟目录生成 icons.json 文件。再次运行命令时，会对比 icons 目录内文件与 icons.json 的匹配关系，确定是否需要再次执行 webpack-spritesmith 插件。</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">bash</span></span>
<span class="line"><span style="color: #E1E4E8">npm i </span><span style="color: #F97583">-</span><span style="color: #79B8FF">D</span><span style="color: #E1E4E8"> webpack</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">spritesmith</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> files </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">icons</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">try</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  fs.</span><span style="color: #B392F0">statSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  files </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> fs.</span><span style="color: #B392F0">readdirSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  files.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> filename </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> item.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;-&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    icons[filename] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">} </span><span style="color: #F97583">catch</span><span style="color: #E1E4E8"> (error) {</span></span>
<span class="line"><span style="color: #E1E4E8">  fs.</span><span style="color: #B392F0">mkdirSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">files.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">  has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">} </span><span style="color: #F97583">else</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">try</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> iconsObj </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> fs.</span><span style="color: #B392F0">readFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #9ECBFF">&quot;utf8&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    iconsObj </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">parse</span><span style="color: #E1E4E8">(iconsObj);</span></span>
<span class="line"><span style="color: #E1E4E8">    has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> files.</span><span style="color: #B392F0">some</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> filename </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> item.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;-&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">iconsObj[filename];</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (has_sprite) {</span></span>
<span class="line"><span style="color: #E1E4E8">      fs.</span><span style="color: #B392F0">writeFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">stringify</span><span style="color: #E1E4E8">(icons, </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  } </span><span style="color: #F97583">catch</span><span style="color: #E1E4E8"> (error) {</span></span>
<span class="line"><span style="color: #E1E4E8">    fs.</span><span style="color: #B392F0">writeFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">stringify</span><span style="color: #E1E4E8">(icons, </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 雪碧图样式处理模板</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">SpritesmithTemplate</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">function</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">data</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// pc</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> icons </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {};</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> tpl </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`.ico { </span></span>
<span class="line"><span style="color: #9ECBFF">  display: inline-block; </span></span>
<span class="line"><span style="color: #9ECBFF">  background-image: url(${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">sprites</span><span style="color: #9ECBFF">[</span><span style="color: #79B8FF">0</span><span style="color: #9ECBFF">].</span><span style="color: #E1E4E8">image</span><span style="color: #9ECBFF">}); </span></span>
<span class="line"><span style="color: #9ECBFF">  background-size: ${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">spritesheet</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">width</span><span style="color: #9ECBFF">}px ${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">spritesheet</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">height</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">}`</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">  data.sprites.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">sprite</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">name</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> sprite.name.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;-&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    icons[</span><span style="color: #9ECBFF">`${</span><span style="color: #E1E4E8">name</span><span style="color: #9ECBFF">}.png`</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    tpl </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`${</span><span style="color: #E1E4E8">tpl</span><span style="color: #9ECBFF">} </span></span>
<span class="line"><span style="color: #9ECBFF">.ico-${</span><span style="color: #E1E4E8">name</span><span style="color: #9ECBFF">}{</span></span>
<span class="line"><span style="color: #9ECBFF">  width: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">width</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">  height: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">height</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">  background-position: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">offset_x</span><span style="color: #9ECBFF">}px ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">offset_y</span><span style="color: #9ECBFF">}px;</span></span>
<span class="line"><span style="color: #9ECBFF">}</span></span>
<span class="line"><span style="color: #9ECBFF">`</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  });</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> tpl;</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (has_sprite) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">SpritesmithPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          src: {</span></span>
<span class="line"><span style="color: #E1E4E8">            cwd: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&quot;./src/assets/icons/&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// 图标根路径</span></span>
<span class="line"><span style="color: #E1E4E8">            glob: </span><span style="color: #9ECBFF">&quot;**/*.png&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// 匹配任意 png 图标</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          target: {</span></span>
<span class="line"><span style="color: #E1E4E8">            image: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&quot;./src/assets/images/sprites.png&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// 生成雪碧图目标路径与名称</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 设置生成CSS背景及其定位的文件或方式</span></span>
<span class="line"><span style="color: #E1E4E8">            css: [</span></span>
<span class="line"><span style="color: #E1E4E8">              [</span></span>
<span class="line"><span style="color: #E1E4E8">                path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&quot;./src/assets/scss/sprites.scss&quot;</span><span style="color: #E1E4E8">),</span></span>
<span class="line"><span style="color: #E1E4E8">                {</span></span>
<span class="line"><span style="color: #E1E4E8">                  format: </span><span style="color: #9ECBFF">&quot;function_based_template&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                }</span></span>
<span class="line"><span style="color: #E1E4E8">              ]</span></span>
<span class="line"><span style="color: #E1E4E8">            ]</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          customTemplates: {</span></span>
<span class="line"><span style="color: #E1E4E8">            function_based_template: SpritesmithTemplate</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          apiOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            cssImageRef: </span><span style="color: #9ECBFF">&quot;../images/sprites.png&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// css文件中引用雪碧图的相对位置路径配置</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          spritesmithOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            padding: </span><span style="color: #79B8FF">2</span></span>
<span class="line"><span style="color: #E1E4E8">          }</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;font&quot;&gt;✅ SVG 转 font 字体&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">bash</span></span>
<span class="line"><span style="color: #E1E4E8">npm i </span><span style="color: #F97583">-</span><span style="color: #79B8FF">D</span><span style="color: #E1E4E8"> svgtofont</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;根目录新增 scripts 目录，并新建 svg2font.js 文件：</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">svgtofont</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svgtofont&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pkg</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;../package.json&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">svgtofont</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  src: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(process.</span><span style="color: #B392F0">cwd</span><span style="color: #E1E4E8">(), </span><span style="color: #9ECBFF">&quot;src/assets/svg&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// svg 图标目录路径</span></span>
<span class="line"><span style="color: #E1E4E8">  dist: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(process.</span><span style="color: #B392F0">cwd</span><span style="color: #E1E4E8">(), </span><span style="color: #9ECBFF">&quot;src/assets/fonts&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// 输出到指定目录中</span></span>
<span class="line"><span style="color: #E1E4E8">  fontName: </span><span style="color: #9ECBFF">&quot;icon&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 设置字体名称</span></span>
<span class="line"><span style="color: #E1E4E8">  css: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生成字体文件</span></span>
<span class="line"><span style="color: #E1E4E8">  startNumber: </span><span style="color: #79B8FF">20000</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// unicode起始编号</span></span>
<span class="line"><span style="color: #E1E4E8">  svgicons2svgfont: {</span></span>
<span class="line"><span style="color: #E1E4E8">    fontHeight: </span><span style="color: #79B8FF">1000</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    normalize: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// website = null, 没有演示html文件</span></span>
<span class="line"><span style="color: #E1E4E8">  website: {</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&quot;icon&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    logo: </span><span style="color: #9ECBFF">&quot;&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    version: pkg.version,</span></span>
<span class="line"><span style="color: #E1E4E8">    meta: {</span></span>
<span class="line"><span style="color: #E1E4E8">      description: </span><span style="color: #9ECBFF">&quot;&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      keywords: </span><span style="color: #9ECBFF">&quot;&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    },</span></span>
<span class="line"><span style="color: #E1E4E8">    description: </span><span style="color: #9ECBFF">``</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    links: [</span></span>
<span class="line"><span style="color: #E1E4E8">      {</span></span>
<span class="line"><span style="color: #E1E4E8">        title: </span><span style="color: #9ECBFF">&quot;Font Class&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        url: </span><span style="color: #9ECBFF">&quot;index.html&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      },</span></span>
<span class="line"><span style="color: #E1E4E8">      {</span></span>
<span class="line"><span style="color: #E1E4E8">        title: </span><span style="color: #9ECBFF">&quot;Unicode&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        url: </span><span style="color: #9ECBFF">&quot;unicode.html&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    ],</span></span>
<span class="line"><span style="color: #E1E4E8">    footerInfo: </span><span style="color: #9ECBFF">``</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}).</span><span style="color: #B392F0">then</span><span style="color: #E1E4E8">(() </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;done!&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;添加 package.json scripts 配置：</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #9ECBFF">&quot;prebuild&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;npm run font&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #9ECBFF">&quot;font&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;node scripts/svg2font.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;执行：</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #E1E4E8">npm run font</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;svg&quot;&gt;✅ 使用 SVG 组件&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">bash</span></span>
<span class="line"><span style="color: #E1E4E8">npm i </span><span style="color: #F97583">-</span><span style="color: #79B8FF">D</span><span style="color: #E1E4E8"> svg</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">sprite</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">loader</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;新增 SvgIcon 组件。</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;</span><span style="color: #85E89D">svg</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;svg-icon&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">       </span><span style="color: #B392F0">aria-hidden</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;true&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">use</span><span style="color: #E1E4E8"> </span><span style="color: #FDAEB7; font-style: italic">:xlink:href=&quot;iconName&quot;</span><span style="color: #E1E4E8"> /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;/</span><span style="color: #85E89D">svg</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">export default {</span></span>
<span class="line"><span style="color: #E1E4E8">  name: </span><span style="color: #9ECBFF">&#39;SvgIcon&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  props: {</span></span>
<span class="line"><span style="color: #E1E4E8">    iconClass: {</span></span>
<span class="line"><span style="color: #E1E4E8">      type: String,</span></span>
<span class="line"><span style="color: #E1E4E8">      required: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  computed: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #B392F0">iconName</span><span style="color: #E1E4E8">() {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`#icon-${</span><span style="color: #79B8FF">this</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">iconClass</span><span style="color: #9ECBFF">}`</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">scoped</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">.svg-icon {</span></span>
<span class="line"><span style="color: #E1E4E8">  width: 1em;</span></span>
<span class="line"><span style="color: #E1E4E8">  height: 1em;</span></span>
<span class="line"><span style="color: #E1E4E8">  vertical</span><span style="color: #F97583">-</span><span style="color: #E1E4E8">align: </span><span style="color: #F97583">-</span><span style="color: #E1E4E8">0.15em;</span></span>
<span class="line"><span style="color: #E1E4E8">  fill: currentColor;</span></span>
<span class="line"><span style="color: #E1E4E8">  overflow: hidden;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/style</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹（用来存放 svg 文件）与 index.js 文件：</p>
<figure class="shiki js"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> SvgIcon </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/components/SvgIcon&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> Vue </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 注册到全局</span></span>
<span class="line"><span style="color: #E1E4E8">Vue.</span><span style="color: #B392F0">component</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg-icon&quot;</span><span style="color: #E1E4E8">, SvgIcon);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">requireAll</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">requireContext</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> requireContext.</span><span style="color: #B392F0">keys</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">map</span><span style="color: #E1E4E8">(requireContext);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">req</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> require.</span><span style="color: #B392F0">context</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./svg&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">svg</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #B392F0">requireAll</span><span style="color: #E1E4E8">(req);</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;在 main.js 中导入 icons&#x2F;index.js</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/icons&quot;</span><span style="color: #E1E4E8">;</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;修改 vue.config.js</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">svgRule</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule.uses.</span><span style="color: #B392F0">clear</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule.exclude.</span><span style="color: #B392F0">add</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">node_modules</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">test</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">svg</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg-sprite-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">loader</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg-sprite-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">        symbolId: </span><span style="color: #9ECBFF">&quot;icon-[name]&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">imagesRule</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    imagesRule.exclude.</span><span style="color: #B392F0">add</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">test</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">(png</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">jpe</span><span style="color: #F97583">?</span><span style="color: #DBEDFF">g</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">gif</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">svg)(</span><span style="color: #85E89D; font-weight: bold">\?</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-去除多余无效的-css"><a href="#✅-去除多余无效的-css" class="headerlink" title="✅ 去除多余无效的 css"></a><span id="removecss">✅ 去除多余无效的 css</span></h3><p>&emsp;&emsp;注：谨慎使用。可能出现各种样式丢失现象。</p>
<ul>
<li>方案一：@fullhuman&#x2F;postcss-purgecss</li>
</ul>
<figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">postcss-import</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">@fullhuman/postcss-purgecss</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;更新 postcss.config.js</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">autoprefixer</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;autoprefixer&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">postcssImport</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;postcss-import&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">purgecss</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@fullhuman/postcss-purgecss&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">  plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(postcssImport);</span></span>
<span class="line"><span style="color: #E1E4E8">  plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #B392F0">purgecss</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">      content: [</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;./layouts/**/*.vue&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;./components/**/*.vue&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;./pages/**/*.vue&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      ],</span></span>
<span class="line"><span style="color: #E1E4E8">      extractors: [</span></span>
<span class="line"><span style="color: #E1E4E8">        {</span></span>
<span class="line"><span style="color: #E1E4E8">          extractor: </span><span style="color: #F97583">class</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Extractor</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">static</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">extract</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">content</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">validSection</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> content.</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">                </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">&lt;style(</span><span style="color: #79B8FF">[\s\S]</span><span style="color: #F97583">*?</span><span style="color: #DBEDFF">)&lt;</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">style&gt;</span><span style="color: #F97583">+</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">gim</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">                </span><span style="color: #9ECBFF">&quot;&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              );</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> (</span></span>
<span class="line"><span style="color: #E1E4E8">                validSection.</span><span style="color: #B392F0">match</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">[A-Za-z0-9-_/:]</span><span style="color: #F97583">*</span><span style="color: #79B8FF">[A-Za-z0-9-_/]</span><span style="color: #F97583">+</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> []</span></span>
<span class="line"><span style="color: #E1E4E8">              );</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          extensions: [</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      ],</span></span>
<span class="line"><span style="color: #E1E4E8">      whitelist: [</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;body&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">      whitelistPatterns: [</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">el-</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">-(leave</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">enter</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">appear)(</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">-(to</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">from</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">active))</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">(?!cursor-move)</span><span style="color: #79B8FF">.</span><span style="color: #F97583">+</span><span style="color: #DBEDFF">-move</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">router-link(</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">-exact)-active</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span></span>
<span class="line"><span style="color: #E1E4E8">      ],</span></span>
<span class="line"><span style="color: #E1E4E8">      whitelistPatternsChildren: [</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">token</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">pre</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">code</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">    })</span></span>
<span class="line"><span style="color: #E1E4E8">  );</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  plugins: [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins, autoprefixer]</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<ul>
<li>方案二：purgecss-webpack-plugin</li>
</ul>
<figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">glob-all</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">purgecss-webpack-plugin</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">glob</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;glob-all&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">PurgecssPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;purgecss-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">PurgecssPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          paths: glob.</span><span style="color: #B392F0">sync</span><span style="color: #E1E4E8">([</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./**/*.vue&quot;</span><span style="color: #E1E4E8">)]),</span></span>
<span class="line"><span style="color: #E1E4E8">          extractors: [</span></span>
<span class="line"><span style="color: #E1E4E8">            {</span></span>
<span class="line"><span style="color: #E1E4E8">              extractor: </span><span style="color: #F97583">class</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Extractor</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">                </span><span style="color: #F97583">static</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">extract</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">content</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">                  </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">validSection</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> content.</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">&lt;style(</span><span style="color: #79B8FF">[\s\S]</span><span style="color: #F97583">*?</span><span style="color: #DBEDFF">)&lt;</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">style&gt;</span><span style="color: #F97583">+</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">gim</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #9ECBFF">&quot;&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                  );</span></span>
<span class="line"><span style="color: #E1E4E8">                  </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> (</span></span>
<span class="line"><span style="color: #E1E4E8">                    validSection.</span><span style="color: #B392F0">match</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">[A-Za-z0-9-_/:]</span><span style="color: #F97583">*</span><span style="color: #79B8FF">[A-Za-z0-9-_/]</span><span style="color: #F97583">+</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> []</span></span>
<span class="line"><span style="color: #E1E4E8">                  );</span></span>
<span class="line"><span style="color: #E1E4E8">                }</span></span>
<span class="line"><span style="color: #E1E4E8">              },</span></span>
<span class="line"><span style="color: #E1E4E8">              extensions: [</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">          ],</span></span>
<span class="line"><span style="color: #E1E4E8">          whitelist: [</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;body&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">          whitelistPatterns: [</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">el-</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">-(leave</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">enter</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">appear)(</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">-(to</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">from</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">active))</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">(?!cursor-move)</span><span style="color: #79B8FF">.</span><span style="color: #F97583">+</span><span style="color: #DBEDFF">-move</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">router-link(</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">-exact)-active</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span></span>
<span class="line"><span style="color: #E1E4E8">          ],</span></span>
<span class="line"><span style="color: #E1E4E8">          whitelistPatternsChildren: [</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">token</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">pre</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #F97583">^</span><span style="color: #DBEDFF">code</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-添加打包分析"><a href="#✅-添加打包分析" class="headerlink" title="✅ 添加打包分析"></a><span id="analyze">✅ 添加打包分析</span></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">BundleAnalyzerPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-bundle-analyzer&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">  .BundleAnalyzerPlugin;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 打包分析</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-report&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(BundleAnalyzerPlugin, [</span></span>
<span class="line"><span style="color: #E1E4E8">        {</span></span>
<span class="line"><span style="color: #E1E4E8">          analyzerMode: </span><span style="color: #9ECBFF">&quot;static&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      ]);</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">[▲ 回顶部](#top)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">### &lt;span id=&quot;externals&quot;&gt;✅ 配置 externals 引入 cdn 资源&lt;/span&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span><span style="color: #E1E4E8">javascript</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    config.externals </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      vue: </span><span style="color: #9ECBFF">&quot;Vue&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;element-ui&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;ELEMENT&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;vue-router&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;VueRouter&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      vuex: </span><span style="color: #9ECBFF">&quot;Vuex&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      axios: </span><span style="color: #9ECBFF">&quot;axios&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">cdn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">      css: [</span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">      js: [</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue@2.6.10/dist/vue.min.js&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vuex@3.1.1/dist/vuex.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/axios@0.19.0/dist/axios.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/index.js&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      ]</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中</span></span>
<span class="line"><span style="color: #E1E4E8">    config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">tap</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">args</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// html中添加cdn</span></span>
<span class="line"><span style="color: #E1E4E8">      args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].cdn </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> cdn;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> args;</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">&amp;emsp;&amp;emsp;在 html 中添加</span></span>
<span class="line"></span>
<span class="line"><span style="color: #9ECBFF">```</span></span>
<span class="line"><span style="color: #F97583">&lt;!--</span><span style="color: #E1E4E8"> 使用CDN的CSS文件 </span><span style="color: #F97583">--&gt;</span></span>
<span class="line"><span style="color: #F97583">&lt;%</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">for</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">var</span><span style="color: #E1E4E8"> i </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> htmlWebpackPlugin.options.cdn </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">htmlWebpackPlugin.options.cdn.css) { </span><span style="color: #F97583">%&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">link</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">rel</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;stylesheet&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">href</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;&lt;%= htmlWebpackPlugin.options.cdn.css[i] %&gt;&quot;</span><span style="color: #E1E4E8"> /&gt;</span></span>
<span class="line"><span style="color: #F97583">&lt;%</span><span style="color: #E1E4E8"> } </span><span style="color: #F97583">%&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">&lt;!--</span><span style="color: #E1E4E8"> 使用CDN的JS文件 </span><span style="color: #F97583">--&gt;</span></span>
<span class="line"><span style="color: #F97583">&lt;%</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">for</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">var</span><span style="color: #E1E4E8"> i </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> htmlWebpackPlugin.options.cdn </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">htmlWebpackPlugin.options.cdn.js) { </span><span style="color: #F97583">%&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">type</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;text/javascript&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">src</span><span style="color: #F97583">=</span><span style="color: #9ECBFF">&quot;&lt;%= htmlWebpackPlugin.options.cdn.js[i] %&gt;&quot;</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">&lt;/script&gt;</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">&lt;%</span><span style="color: #E1E4E8"> </span><span style="color: #FDAEB7; font-style: italic">}</span><span style="color: #E1E4E8"> </span><span style="color: #FDAEB7; font-style: italic">%</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-多页面打包-multi-page"><a href="#✅-多页面打包-multi-page" class="headerlink" title="✅ 多页面打包 multi-page"></a><span id="multiple-pages">✅ 多页面打包 multi-page</span></h3><p>&emsp;&emsp;多入口页面打包，建议在 src 目录下新建 pages 目录存放多页面模块。</p>
<ul>
<li>pages.config.js</li>
</ul>
<p>&emsp;&emsp; 配置多页面信息。src&#x2F;main.js 文件对应 main 字段，其他根据参照 pages 为根路径为字段。如下:</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&#39;admin&#39;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    template: </span><span style="color: #9ECBFF">&#39;public/index.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    filename: </span><span style="color: #9ECBFF">&#39;admin.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&#39;后台管理&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&#39;mobile&#39;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    template: </span><span style="color: #9ECBFF">&#39;public/index.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    filename: </span><span style="color: #9ECBFF">&#39;mobile.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&#39;移动端&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&#39;pc/crm&#39;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    template: </span><span style="color: #9ECBFF">&#39;public/index.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    filename: </span><span style="color: #9ECBFF">&#39;pc-crm.html&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&#39;预发服务&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<ul>
<li>vue.config.js</li>
</ul>
<p>&emsp;&emsp;vue.config.js 的 pages 字段为多页面提供配置</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">glob</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;glob&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pagesInfo</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./pages.config&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pages</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">glob.</span><span style="color: #B392F0">sync</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;./src/pages/**/main.js&#39;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">entry</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> chunk </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> entry.</span><span style="color: #B392F0">match</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.\/</span><span style="color: #DBEDFF">src</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">pages</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">(</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">main</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">js</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)[</span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">curr</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> pagesInfo[chunk];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (curr) {</span></span>
<span class="line"><span style="color: #E1E4E8">    pages[chunk] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      entry,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">curr,</span></span>
<span class="line"><span style="color: #E1E4E8">      chunk: [</span><span style="color: #9ECBFF">&quot;chunk-vendors&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;chunk-common&quot;</span><span style="color: #E1E4E8">, chunk]</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 防止多页面打包卡顿</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> config.plugins.</span><span style="color: #B392F0">delete</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;named-chunks&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> config;</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  pages</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;如果多页面打包需要使用 CDN，使用 vue inspect –plugins 查看 html 是否在结果数组中的形式。上例中 plugins 列表中存在’html-main’,’html-pages&#x2F;admin’,’html-pages&#x2F;mobile’， 没有’html’。因此不能再使用 config.plugin(“html”)。</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">glob</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;glob&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pagesInfo</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./pages.config&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pages</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">glob.</span><span style="color: #B392F0">sync</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;./src/pages/**/main.js&#39;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">entry</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> chunk </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> entry.</span><span style="color: #B392F0">match</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.\/</span><span style="color: #DBEDFF">src</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">pages</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">(</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">main</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">js</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)[</span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">curr</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> pagesInfo[chunk];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (curr) {</span></span>
<span class="line"><span style="color: #E1E4E8">    pages[chunk] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      entry,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">curr,</span></span>
<span class="line"><span style="color: #E1E4E8">      chunk: [</span><span style="color: #9ECBFF">&quot;chunk-vendors&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;chunk-common&quot;</span><span style="color: #E1E4E8">, chunk]</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  publicPath: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> process.env.</span><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">//</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    config.externals </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      vue: </span><span style="color: #9ECBFF">&quot;Vue&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;element-ui&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;ELEMENT&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;vue-router&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;VueRouter&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      vuex: </span><span style="color: #9ECBFF">&quot;Vuex&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      axios: </span><span style="color: #9ECBFF">&quot;axios&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">cdn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">      css: [</span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">      js: [</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue@2.6.10/dist/vue.min.js&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vuex@3.1.1/dist/vuex.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/axios@0.19.0/dist/axios.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/index.js&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      ]</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 防止多页面打包卡顿</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> config.plugins.</span><span style="color: #B392F0">delete</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;named-chunks&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 多页面cdn添加</span></span>
<span class="line"><span style="color: #E1E4E8">    Object.</span><span style="color: #B392F0">keys</span><span style="color: #E1E4E8">(pagesInfo).</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">page</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">`html-${</span><span style="color: #E1E4E8">page</span><span style="color: #9ECBFF">}`</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">tap</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">args</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// html中添加cdn</span></span>
<span class="line"><span style="color: #E1E4E8">        args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].cdn </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> cdn;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 修复 Lazy loading routes Error</span></span>
<span class="line"><span style="color: #E1E4E8">        args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].chunksSortMode </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;none&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> args;</span></span>
<span class="line"><span style="color: #E1E4E8">      });</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> config;</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  pages</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-删除-moment-语言包"><a href="#✅-删除-moment-语言包" class="headerlink" title="✅ 删除 moment 语言包"></a><span id="moment">✅ 删除 moment 语言包</span></h3><p>&emsp;&emsp;删除 moment 除 zh-cn 中文包外的其它语言包，无需在代码中手动引入 zh-cn 语言包。</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">webpack</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    config</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;ignore&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> webpack.</span><span style="color: #B392F0">ContextReplacementPlugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">moment</span><span style="color: #79B8FF">[/</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">]</span><span style="color: #DBEDFF">locale</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">zh-cn</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> config;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-去掉-console-log"><a href="#✅-去掉-console-log" class="headerlink" title="✅ 去掉 console.log"></a><span id="log">✅ 去掉 console.log</span></h3><h5 id="方法一：使用-babel-plugin-transform-remove-console-插件"><a href="#方法一：使用-babel-plugin-transform-remove-console-插件" class="headerlink" title="方法一：使用 babel-plugin-transform-remove-console 插件"></a>方法一：使用 babel-plugin-transform-remove-console 插件</h5><figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">babel-plugin-transform-remove-console</span></span></code></pre></div></div></figure>

<p>在 babel.config.js 中配置</p>
<figure class="shiki"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">const IS_PROD = [&quot;production&quot;, &quot;prod&quot;].includes(process.env.NODE_ENV);</span></span>
<span class="line"><span style="color: #e1e4e8"></span></span>
<span class="line"><span style="color: #e1e4e8">const plugins = [];</span></span>
<span class="line"><span style="color: #e1e4e8">if (IS_PROD) {</span></span>
<span class="line"><span style="color: #e1e4e8">  plugins.push(&quot;transform-remove-console&quot;);</span></span>
<span class="line"><span style="color: #e1e4e8">}</span></span>
<span class="line"><span style="color: #e1e4e8"></span></span>
<span class="line"><span style="color: #e1e4e8">module.exports = {</span></span>
<span class="line"><span style="color: #e1e4e8">  presets: [&quot;@vue/app&quot;, { useBuiltIns: &quot;entry&quot; }],</span></span>
<span class="line"><span style="color: #e1e4e8">  plugins</span></span>
<span class="line"><span style="color: #e1e4e8">};</span></span></code></pre></div></div></figure>

<h5 id="方法二："><a href="#方法二：" class="headerlink" title="方法二："></a>方法二：</h5><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">UglifyJsPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;uglifyjs-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">UglifyJsPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          uglifyOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            compress: {</span></span>
<span class="line"><span style="color: #E1E4E8">              warnings: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              drop_console: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              drop_debugger: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              pure_funcs: [</span><span style="color: #9ECBFF">&quot;console.log&quot;</span><span style="color: #E1E4E8">] </span><span style="color: #6A737D">//移除console</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          sourceMap: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          parallel: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">      config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;如果使用 uglifyjs-webpack-plugin 会报错，可能存在 node_modules 中有些依赖需要 babel 转译。</p>
<p>&emsp;&emsp;而 vue-cli 的<a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/config/#transpiledependencies">transpileDependencies</a>配置默认为[], babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。配置需要转译的第三方库。</p>
<p><a href="#top">▲ 回顶部</a></p>
<h3 id="利用-splitChunks-单独打包第三方模块"><a href="#利用-splitChunks-单独打包第三方模块" class="headerlink" title="利用 splitChunks 单独打包第三方模块"></a><span id="splitchunks">利用 splitChunks 单独打包第三方模块</span></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.optimization </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        splitChunks: {</span></span>
<span class="line"><span style="color: #E1E4E8">          cacheGroups: {</span></span>
<span class="line"><span style="color: #E1E4E8">            common: {</span></span>
<span class="line"><span style="color: #E1E4E8">              name: </span><span style="color: #9ECBFF">&quot;chunk-common&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              chunks: </span><span style="color: #9ECBFF">&quot;initial&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              minChunks: </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              maxInitialRequests: </span><span style="color: #79B8FF">5</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              minSize: </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              priority: </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              reuseExistingChunk: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              enforce: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">            },</span></span>
<span class="line"><span style="color: #E1E4E8">            vendors: {</span></span>
<span class="line"><span style="color: #E1E4E8">              name: </span><span style="color: #9ECBFF">&quot;chunk-vendors&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              test:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #DBEDFF">node_modules</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              chunks: </span><span style="color: #9ECBFF">&quot;initial&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              priority: </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              reuseExistingChunk: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              enforce: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">            },</span></span>
<span class="line"><span style="color: #E1E4E8">            elementUI: {</span></span>
<span class="line"><span style="color: #E1E4E8">              name: </span><span style="color: #9ECBFF">&quot;chunk-elementui&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              test:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #DBEDFF">node_modules</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #DBEDFF">element-ui</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              chunks: </span><span style="color: #9ECBFF">&quot;all&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              priority: </span><span style="color: #79B8FF">3</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              reuseExistingChunk: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              enforce: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">            },</span></span>
<span class="line"><span style="color: #E1E4E8">            echarts: {</span></span>
<span class="line"><span style="color: #E1E4E8">              name: </span><span style="color: #9ECBFF">&quot;chunk-echarts&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              test:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #DBEDFF">node_modules</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #DBEDFF">(vue-)</span><span style="color: #F97583">?</span><span style="color: #DBEDFF">echarts</span><span style="color: #79B8FF">[</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">/]</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              chunks: </span><span style="color: #9ECBFF">&quot;all&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              priority: </span><span style="color: #79B8FF">4</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              reuseExistingChunk: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              enforce: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">          }</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      };</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.optimization.</span><span style="color: #B392F0">delete</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;splitChunks&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> config;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-开启-gzip-压缩"><a href="#✅-开启-gzip-压缩" class="headerlink" title="✅ 开启 gzip 压缩"></a><span id="gzip">✅ 开启 gzip 压缩</span></h3><figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">compression-webpack-plugin</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">CompressionWebpackPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;compression-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">productionGzipExtensions</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">(js</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">css</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">json</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">txt</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">html</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">ico</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">svg)(</span><span style="color: #85E89D; font-weight: bold">\?</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">i</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">CompressionWebpackPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          filename: </span><span style="color: #9ECBFF">&quot;[path].gz[query]&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          algorithm: </span><span style="color: #9ECBFF">&quot;gzip&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          test: productionGzipExtensions,</span></span>
<span class="line"><span style="color: #E1E4E8">          threshold: </span><span style="color: #79B8FF">10240</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          minRatio: </span><span style="color: #79B8FF">0.8</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;还可以开启比 gzip 体验更好的 Zopfli 压缩详见<a target="_blank" rel="noopener" href="https://webpack.js.org/plugins/compression-webpack-plugin">https://webpack.js.org/plugins/compression-webpack-plugin</a></p>
<figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">@gfx/zopfli</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">brotli-webpack-plugin</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">CompressionWebpackPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;compression-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">zopfli</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@gfx/zopfli&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">BrotliPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;brotli-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">productionGzipExtensions</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">(js</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">css</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">json</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">txt</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">html</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">ico</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">svg)(</span><span style="color: #85E89D; font-weight: bold">\?</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">i</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">CompressionWebpackPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">algorithm</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">input</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">compressionOptions</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">callback</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> zopfli.</span><span style="color: #B392F0">gzip</span><span style="color: #E1E4E8">(input, compressionOptions, callback);</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          compressionOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            numiterations: </span><span style="color: #79B8FF">15</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          minRatio: </span><span style="color: #79B8FF">0.99</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          test: productionGzipExtensions</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">BrotliPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          test: productionGzipExtensions,</span></span>
<span class="line"><span style="color: #E1E4E8">          minRatio: </span><span style="color: #79B8FF">0.99</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-开启-stylelint-检测scss-css语法"><a href="#✅-开启-stylelint-检测scss-css语法" class="headerlink" title="✅ 开启 stylelint 检测scss, css语法"></a><span id="stylelint">✅ 开启 stylelint 检测scss, css语法</span></h3><figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stylelint</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stylelint-config-standard</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stylelint-config-prettier</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stylelint-webpack-plugin</span></span></code></pre></div></div></figure>

<p>在文件夹创建stylelint.config.js,详细配置在<a target="_blank" rel="noopener" href="https://stylelint.io/user-guide/configuration">这里</a></p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  ignoreFiles: [</span><span style="color: #9ECBFF">&quot;**/*.js&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;src/assets/css/element-variables.scss&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;theme/&quot;</span><span style="color: #E1E4E8">], </span></span>
<span class="line"><span style="color: #E1E4E8">  extends: [</span><span style="color: #9ECBFF">&quot;stylelint-config-standard&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;stylelint-config-prettier&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">  rules: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;no-empty-source&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;at-rule-no-unknown&quot;</span><span style="color: #E1E4E8">: [</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      {</span></span>
<span class="line"><span style="color: #E1E4E8">        ignoreAtRules: [</span><span style="color: #9ECBFF">&quot;extend&quot;</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    ]</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>
<p>启用webpack配置</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">StylelintPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;stylelint-webpack-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_DEV</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">StylelintPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          files: [</span><span style="color: #9ECBFF">&quot;src/**/*.vue&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;src/assets/**/*.scss&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">          fix: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">//打开自动修复（谨慎使用！注意上面的配置不要加入js或html文件，会发生问题，js文件请手动修复）</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>
<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-为-sass-提供全局样式，以及全局变量"><a href="#✅-为-sass-提供全局样式，以及全局变量" class="headerlink" title="✅ 为 sass 提供全局样式，以及全局变量"></a><span id="globalscss">✅ 为 sass 提供全局样式，以及全局变量</span></h3><p>&emsp;&emsp;可以通过在 main.js 中 Vue.prototype.$src &#x3D; process.env.VUE_APP_PUBLIC_PATH;挂载环境变量中的配置信息，然后在js中使用$src 访问。</p>
<p>&emsp;&emsp;css 中可以使用注入 sass 变量访问环境变量中的配置信息</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  css: {</span></span>
<span class="line"><span style="color: #E1E4E8">    extract: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    sourceMap: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    loaderOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">      scss: {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders</span></span>
<span class="line"><span style="color: #E1E4E8">        prependData: </span><span style="color: #9ECBFF">`</span></span>
<span class="line"><span style="color: #9ECBFF">        @import &quot;@scss/variables.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">        @import &quot;@scss/mixins.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">        @import &quot;@scss/function.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">        $src: &quot;${</span><span style="color: #E1E4E8">process</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">env</span><span style="color: #9ECBFF">.</span><span style="color: #79B8FF">VUE_APP_OSS_SRC</span><span style="color: #9ECBFF">}&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">        `</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p>在 scss 中引用</p>
<figure class="shiki css"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">.home</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">background</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">url</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">$src+</span><span style="color: #9ECBFF">&quot;/images/500.png&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-为-stylus-提供全局变量"><a href="#✅-为-stylus-提供全局变量" class="headerlink" title="✅ 为 stylus 提供全局变量"></a><span id="globalstylus">✅ 为 stylus 提供全局变量</span></h3><figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">style-resources-loader</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">addStylusResource</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">rule</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  rule</span></span>
<span class="line"><span style="color: #E1E4E8">    .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;style-resouce&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">    .</span><span style="color: #B392F0">loader</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;style-resources-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">    .</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">      patterns: [</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/assets/stylus/variable.styl&quot;</span><span style="color: #E1E4E8">)]</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">types</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;vue-modules&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;normal-modules&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;normal&quot;</span><span style="color: #E1E4E8">];</span></span>
<span class="line"><span style="color: #E1E4E8">    types.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">type</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">addStylusResource</span><span style="color: #E1E4E8">(config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;stylus&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">oneOf</span><span style="color: #E1E4E8">(type))</span></span>
<span class="line"><span style="color: #E1E4E8">    );</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="预渲染-prerender-spa-plugin"><a href="#预渲染-prerender-spa-plugin" class="headerlink" title="预渲染 prerender-spa-plugin"></a><span id="prerender">预渲染 prerender-spa-plugin</span></h3><figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">prerender-spa-plugin</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">PrerenderSpaPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;prerender-spa-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">PrerenderSpaPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          staticDir: </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;dist&quot;</span><span style="color: #E1E4E8">),</span></span>
<span class="line"><span style="color: #E1E4E8">          routes: [</span><span style="color: #9ECBFF">&quot;/&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">postProcess</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">ctx</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">            ctx.route </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> ctx.originalRoute;</span></span>
<span class="line"><span style="color: #E1E4E8">            ctx.html </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> ctx.html.</span><span style="color: #B392F0">split</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">&gt;</span><span style="color: #79B8FF">[\s]</span><span style="color: #F97583">+</span><span style="color: #DBEDFF">&lt;</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">gim</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;&gt;&lt;&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (ctx.route.</span><span style="color: #B392F0">endsWith</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;.html&quot;</span><span style="color: #E1E4E8">)) {</span></span>
<span class="line"><span style="color: #E1E4E8">              ctx.outputPath </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&quot;dist&quot;</span><span style="color: #E1E4E8">, ctx.route);</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> ctx;</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          minify: {</span></span>
<span class="line"><span style="color: #E1E4E8">            collapseBooleanAttributes: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            collapseWhitespace: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            decodeEntities: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            keepClosingSlash: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            sortAttributes: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          renderer: </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> PrerenderSpaPlugin.</span><span style="color: #B392F0">PuppeteerRenderer</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 需要注入一个值，这样就可以检测页面当前是否是预渲染的</span></span>
<span class="line"><span style="color: #E1E4E8">            inject: {},</span></span>
<span class="line"><span style="color: #E1E4E8">            headless: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 视图组件是在API请求获取所有必要数据后呈现的，因此我们在dom中存在“data view”属性后创建页面快照</span></span>
<span class="line"><span style="color: #E1E4E8">            renderAfterDocumentEvent: </span><span style="color: #9ECBFF">&quot;render-event&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          })</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p>&emsp;&emsp;mounted()中添加 document.dispatchEvent(new Event(‘render-event’))</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Vue</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  router,</span></span>
<span class="line"><span style="color: #E1E4E8">  store,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">render</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">h</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">h</span><span style="color: #E1E4E8">(App),</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">mounted</span><span style="color: #E1E4E8">() {</span></span>
<span class="line"><span style="color: #E1E4E8">    document.</span><span style="color: #B392F0">dispatchEvent</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Event</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;render-event&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}).</span><span style="color: #B392F0">$mount</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;#app&quot;</span><span style="color: #E1E4E8">);</span></span></code></pre></div></div></figure>

<h5 id="为自定义预渲染页面添加自定义-title、description、content"><a href="#为自定义预渲染页面添加自定义-title、description、content" class="headerlink" title="为自定义预渲染页面添加自定义 title、description、content"></a>为自定义预渲染页面添加自定义 title、description、content</h5><ul>
<li><p>删除 public&#x2F;index.html 中关于 description、content 的 meta 标签。保留 title 标签</p>
</li>
<li><p>配置 router-config.js</p>
</li>
</ul>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;/&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&quot;首页&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    keywords: </span><span style="color: #9ECBFF">&quot;首页关键词&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    description: </span><span style="color: #9ECBFF">&quot;这是首页描述&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;/about.html&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    title: </span><span style="color: #9ECBFF">&quot;关于我们&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    keywords: </span><span style="color: #9ECBFF">&quot;关于我们页面关键词&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    description: </span><span style="color: #9ECBFF">&quot;关于我们页面关键词描述&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<ul>
<li>vue.config.js</li>
</ul>
<figure class="shiki js"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">PrerenderSpaPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;prerender-spa-plugin&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">routesConfig</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./router-config&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 预加载</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">PrerenderSpaPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          staticDir: </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;dist&quot;</span><span style="color: #E1E4E8">),</span></span>
<span class="line"><span style="color: #E1E4E8">          routes: Object.</span><span style="color: #B392F0">keys</span><span style="color: #E1E4E8">(routesConfig),</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">postProcess</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">ctx</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">            ctx.route </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> ctx.originalRoute;</span></span>
<span class="line"><span style="color: #E1E4E8">            ctx.html </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> ctx.html.</span><span style="color: #B392F0">split</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">&gt;</span><span style="color: #79B8FF">[\s]</span><span style="color: #F97583">+</span><span style="color: #DBEDFF">&lt;</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">gim</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;&gt;&lt;&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">            ctx.html </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> ctx.html.</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">&lt;title&gt;(</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*?</span><span style="color: #DBEDFF">)&lt;</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">title&gt;</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">gi</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #9ECBFF">`&lt;title&gt;${</span></span>
<span class="line"><span style="color: #9ECBFF">                </span><span style="color: #E1E4E8">routesConfig</span><span style="color: #9ECBFF">[</span><span style="color: #E1E4E8">ctx</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">route</span><span style="color: #9ECBFF">].</span><span style="color: #E1E4E8">title</span></span>
<span class="line"><span style="color: #9ECBFF">              </span><span style="color: #9ECBFF">}&lt;/title&gt;&lt;meta name=&quot;keywords&quot; content=&quot;${</span></span>
<span class="line"><span style="color: #9ECBFF">                </span><span style="color: #E1E4E8">routesConfig</span><span style="color: #9ECBFF">[</span><span style="color: #E1E4E8">ctx</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">route</span><span style="color: #9ECBFF">].</span><span style="color: #E1E4E8">keywords</span></span>
<span class="line"><span style="color: #9ECBFF">              </span><span style="color: #9ECBFF">}&quot; /&gt;&lt;meta name=&quot;description&quot; content=&quot;${</span></span>
<span class="line"><span style="color: #9ECBFF">                </span><span style="color: #E1E4E8">routesConfig</span><span style="color: #9ECBFF">[</span><span style="color: #E1E4E8">ctx</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">route</span><span style="color: #9ECBFF">].</span><span style="color: #E1E4E8">description</span></span>
<span class="line"><span style="color: #9ECBFF">              </span><span style="color: #9ECBFF">}&quot; /&gt;`</span></span>
<span class="line"><span style="color: #E1E4E8">            );</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (ctx.route.</span><span style="color: #B392F0">endsWith</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;.html&quot;</span><span style="color: #E1E4E8">)) {</span></span>
<span class="line"><span style="color: #E1E4E8">              ctx.outputPath </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&quot;dist&quot;</span><span style="color: #E1E4E8">, ctx.route);</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> ctx;</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          minify: {</span></span>
<span class="line"><span style="color: #E1E4E8">            collapseBooleanAttributes: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            collapseWhitespace: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            decodeEntities: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            keepClosingSlash: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            sortAttributes: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          renderer: </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> PrerenderSpaPlugin.</span><span style="color: #B392F0">PuppeteerRenderer</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 需要注入一个值，这样就可以检测页面当前是否是预渲染的</span></span>
<span class="line"><span style="color: #E1E4E8">            inject: {},</span></span>
<span class="line"><span style="color: #E1E4E8">            headless: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 视图组件是在API请求获取所有必要数据后呈现的，因此我们在dom中存在“data view”属性后创建页面快照</span></span>
<span class="line"><span style="color: #E1E4E8">            renderAfterDocumentEvent: </span><span style="color: #9ECBFF">&quot;render-event&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          })</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-添加-IE-兼容"><a href="#✅-添加-IE-兼容" class="headerlink" title="✅ 添加 IE 兼容"></a><span id="ie">✅ 添加 IE 兼容</span></h3><p>&emsp;&emsp;在 main.js 中添加</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;core-js/stable&#39;</span><span style="color: #E1E4E8">; </span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;regenerator-runtime/runtime&#39;</span><span style="color: #E1E4E8">;</span></span></code></pre></div></div></figure>

<p>配置 babel.config.js</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  presets: [[</span><span style="color: #9ECBFF">&quot;@vue/app&quot;</span><span style="color: #E1E4E8">, { useBuiltIns: </span><span style="color: #9ECBFF">&quot;entry&quot;</span><span style="color: #E1E4E8"> }]],</span></span>
<span class="line"><span style="color: #E1E4E8">  plugins: plugins</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-静态资源自动打包上传阿里-oss、华为-obs"><a href="#✅-静态资源自动打包上传阿里-oss、华为-obs" class="headerlink" title="✅ 静态资源自动打包上传阿里 oss、华为 obs"></a><span id="alioss">✅ 静态资源自动打包上传阿里 oss、华为 obs</span></h3><p>&emsp;&emsp;开启文件上传 ali oss，需要将 publicPath 改成 ali oss 资源 url 前缀,也就是修改 VUE_APP_PUBLIC_PATH。具体配置参见<a target="_blank" rel="noopener" href="https://github.com/staven630/webpack-oss">阿里 oss 插件 webpack-oss</a>、<a target="_blank" rel="noopener" href="https://github.com/staven630/huawei-obs-plugin">华为 obs 插件 huawei-obs-plugin</a></p>
<figure class="shiki bash"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #B392F0">npm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-D</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">webpack-oss</span></span></code></pre></div></div></figure>

<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">AliOssPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-oss&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">format</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> AliOssPlugin.</span><span style="color: #B392F0">getFormat</span><span style="color: #E1E4E8">();</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  publicPath: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`${</span><span style="color: #E1E4E8">process</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">env</span><span style="color: #9ECBFF">.</span><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #9ECBFF">}/${</span><span style="color: #E1E4E8">format</span><span style="color: #9ECBFF">}`</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 默认&#39;/&#39;，部署应用包时的基本 URL</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">AliOssPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          accessKeyId: process.env.</span><span style="color: #79B8FF">ACCESS_KEY_ID</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          accessKeySecret: process.env.</span><span style="color: #79B8FF">ACCESS_KEY_SECRET</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          region: process.env.</span><span style="color: #79B8FF">REGION</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          bucket: process.env.</span><span style="color: #79B8FF">BUCKET</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          prefix: process.env.</span><span style="color: #79B8FF">PREFIX</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          exclude:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">html</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          format</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<p><a href="#top">▲ 回顶部</a></p>
<h3 id="✅-完整配置"><a href="#✅-完整配置" class="headerlink" title="✅ 完整配置"></a><span id="allconfig">✅ 完整配置</span></h3><figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">SpritesmithPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-spritesmith&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">BundleAnalyzerPlugin</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-bundle-analyzer&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">  .BundleAnalyzerPlugin;</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">webpack</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;path&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">fs</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;fs&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #FFAB70">dir</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">join</span><span style="color: #E1E4E8">(__dirname, dir);</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #9ECBFF">&quot;production&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;prod&quot;</span><span style="color: #E1E4E8">].</span><span style="color: #B392F0">includes</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">NODE_ENV</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">glob</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;glob&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pagesInfo</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;./pages.config&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">pages</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">glob.</span><span style="color: #B392F0">sync</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;./src/pages/**/main.js&#39;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">entry</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> chunk </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> entry.</span><span style="color: #B392F0">match</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.\/</span><span style="color: #DBEDFF">src</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">pages</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">(</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #85E89D; font-weight: bold">\/</span><span style="color: #DBEDFF">main</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">js</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)[</span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">curr</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> pagesInfo[chunk];</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (curr) {</span></span>
<span class="line"><span style="color: #E1E4E8">    pages[chunk] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      entry,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">curr,</span></span>
<span class="line"><span style="color: #E1E4E8">      chunk: [</span><span style="color: #9ECBFF">&quot;chunk-vendors&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;chunk-common&quot;</span><span style="color: #E1E4E8">, chunk]</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> files </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">icons</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">try</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  fs.</span><span style="color: #B392F0">statSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  files </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> fs.</span><span style="color: #B392F0">readdirSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">  files.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> filename </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> item.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;-&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    icons[filename] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">} </span><span style="color: #F97583">catch</span><span style="color: #E1E4E8"> (error) {</span></span>
<span class="line"><span style="color: #E1E4E8">  fs.</span><span style="color: #B392F0">mkdirSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./src/assets/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">files.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">  has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">} </span><span style="color: #F97583">else</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">try</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> iconsObj </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> fs.</span><span style="color: #B392F0">readFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #9ECBFF">&quot;utf8&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    iconsObj </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">parse</span><span style="color: #E1E4E8">(iconsObj);</span></span>
<span class="line"><span style="color: #E1E4E8">    has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> files.</span><span style="color: #B392F0">some</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> filename </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> item.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;-&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">iconsObj[filename];</span></span>
<span class="line"><span style="color: #E1E4E8">    });</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (has_sprite) {</span></span>
<span class="line"><span style="color: #E1E4E8">      fs.</span><span style="color: #B392F0">writeFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">stringify</span><span style="color: #E1E4E8">(icons, </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  } </span><span style="color: #F97583">catch</span><span style="color: #E1E4E8"> (error) {</span></span>
<span class="line"><span style="color: #E1E4E8">    fs.</span><span style="color: #B392F0">writeFileSync</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;./icons.json&quot;</span><span style="color: #E1E4E8">), </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">stringify</span><span style="color: #E1E4E8">(icons, </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    has_sprite </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 雪碧图样式处理模板</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">SpritesmithTemplate</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">function</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">data</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// pc</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> icons </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {}</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> tpl </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`.ico { </span></span>
<span class="line"><span style="color: #9ECBFF">  display: inline-block; </span></span>
<span class="line"><span style="color: #9ECBFF">  background-image: url(${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">sprites</span><span style="color: #9ECBFF">[</span><span style="color: #79B8FF">0</span><span style="color: #9ECBFF">].</span><span style="color: #E1E4E8">image</span><span style="color: #9ECBFF">}); </span></span>
<span class="line"><span style="color: #9ECBFF">  background-size: ${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">spritesheet</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">width</span><span style="color: #9ECBFF">}px ${</span><span style="color: #E1E4E8">data</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">spritesheet</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">height</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">}`</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">  data.sprites.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">sprite</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">name</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> sprite.name.</span><span style="color: #B392F0">toLocaleLowerCase</span><span style="color: #E1E4E8">().</span><span style="color: #B392F0">replace</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">_</span><span style="color: #9ECBFF">/</span><span style="color: #F97583">g</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&#39;-&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">    icons[</span><span style="color: #9ECBFF">`${</span><span style="color: #E1E4E8">name</span><span style="color: #9ECBFF">}.png`</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">    tpl </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">`${</span><span style="color: #E1E4E8">tpl</span><span style="color: #9ECBFF">} </span></span>
<span class="line"><span style="color: #9ECBFF">.ico-${</span><span style="color: #E1E4E8">name</span><span style="color: #9ECBFF">}{</span></span>
<span class="line"><span style="color: #9ECBFF">  width: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">width</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">  height: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">height</span><span style="color: #9ECBFF">}px; </span></span>
<span class="line"><span style="color: #9ECBFF">  background-position: ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">offset_x</span><span style="color: #9ECBFF">}px ${</span><span style="color: #E1E4E8">sprite</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">offset_y</span><span style="color: #9ECBFF">}px;</span></span>
<span class="line"><span style="color: #9ECBFF">}</span></span>
<span class="line"><span style="color: #9ECBFF">`</span></span>
<span class="line"><span style="color: #E1E4E8">  })</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> tpl</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  publicPath: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> process.env.</span><span style="color: #79B8FF">VUE_APP_PUBLIC_PATH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 默认&#39;/&#39;，部署应用包时的基本 URL</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// outputDir: process.env.outputDir || &#39;dist&#39;, // &#39;dist&#39;, 生产环境构建文件的目录</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// assetsDir: &quot;&quot;, // 相对于outputDir的静态资源(js、css、img、fonts)目录</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">configureWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">plugins</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [];</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (has_sprite) {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 生成雪碧图</span></span>
<span class="line"><span style="color: #E1E4E8">      plugins.</span><span style="color: #B392F0">push</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">SpritesmithPlugin</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          src: {</span></span>
<span class="line"><span style="color: #E1E4E8">            cwd: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&#39;./src/assets/icons/&#39;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// 图标根路径</span></span>
<span class="line"><span style="color: #E1E4E8">            glob: </span><span style="color: #9ECBFF">&#39;**/*.png&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// 匹配任意 png 图标</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          target: {</span></span>
<span class="line"><span style="color: #E1E4E8">            image: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&#39;./src/assets/images/sprites.png&#39;</span><span style="color: #E1E4E8">), </span><span style="color: #6A737D">// 生成雪碧图目标路径与名称</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 设置生成CSS背景及其定位的文件或方式</span></span>
<span class="line"><span style="color: #E1E4E8">            css: [</span></span>
<span class="line"><span style="color: #E1E4E8">              [</span></span>
<span class="line"><span style="color: #E1E4E8">                path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&#39;./src/assets/scss/sprites.scss&#39;</span><span style="color: #E1E4E8">),</span></span>
<span class="line"><span style="color: #E1E4E8">                {</span></span>
<span class="line"><span style="color: #E1E4E8">                  format: </span><span style="color: #9ECBFF">&#39;function_based_template&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                }</span></span>
<span class="line"><span style="color: #E1E4E8">              ]</span></span>
<span class="line"><span style="color: #E1E4E8">            ]</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          customTemplates: {</span></span>
<span class="line"><span style="color: #E1E4E8">            function_based_template: SpritesmithTemplate</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          apiOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            cssImageRef: </span><span style="color: #9ECBFF">&#39;../images/sprites.png&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// css文件中引用雪碧图的相对位置路径配置</span></span>
<span class="line"><span style="color: #E1E4E8">          },</span></span>
<span class="line"><span style="color: #E1E4E8">          spritesmithOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">            padding: </span><span style="color: #79B8FF">2</span></span>
<span class="line"><span style="color: #E1E4E8">          }</span></span>
<span class="line"><span style="color: #E1E4E8">        })</span></span>
<span class="line"><span style="color: #E1E4E8">      )</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    config.externals </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      vue: </span><span style="color: #9ECBFF">&quot;Vue&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;element-ui&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;ELEMENT&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;vue-router&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;VueRouter&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      vuex: </span><span style="color: #9ECBFF">&quot;Vuex&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      axios: </span><span style="color: #9ECBFF">&quot;axios&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    config.plugins </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">config.plugins, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">plugins];</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">chainWebpack</span><span style="color: #E1E4E8">: </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 修复HMR</span></span>
<span class="line"><span style="color: #E1E4E8">    config.resolve.</span><span style="color: #B392F0">symlinks</span><span style="color: #E1E4E8">(</span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// config.plugins.delete(&#39;preload&#39;);</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// config.plugins.delete(&#39;prefetch&#39;);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    config</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;ignore&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> webpack.</span><span style="color: #B392F0">ContextReplacementPlugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">moment</span><span style="color: #79B8FF">[/</span><span style="color: #85E89D; font-weight: bold">\\</span><span style="color: #79B8FF">]</span><span style="color: #DBEDFF">locale</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">zh-cn</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      );</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 添加别名</span></span>
<span class="line"><span style="color: #E1E4E8">    config.resolve.alias</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;vue$&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;vue/dist/vue.esm.js&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@apis&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/apis&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@assets&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/assets&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@scss&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/assets/scss&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@components&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/components&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@middlewares&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/middlewares&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@mixins&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/mixins&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@plugins&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/plugins&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@router&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/router&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@store&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/store&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@utils&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/utils&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@views&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/views&quot;</span><span style="color: #E1E4E8">))</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;@layouts&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/layouts&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">cdn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">      css: [</span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">      js: [</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue@2.6.10/dist/vue.min.js&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/vuex@3.1.1/dist/vuex.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/axios@0.19.0/dist/axios.min.js&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #9ECBFF">&quot;//unpkg.com/element-ui@2.10.1/lib/index.js&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      ]</span></span>
<span class="line"><span style="color: #E1E4E8">    };</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// config.plugin(&quot;html&quot;).tap(args =&gt; {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   // html中添加cdn</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   args[0].cdn = cdn;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   // 修复 Lazy loading routes Error</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   args[0].chunksSortMode = &quot;none&quot;;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   return args;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 防止多页面打包卡顿</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #FFAB70">config</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> config.plugins.</span><span style="color: #B392F0">delete</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;named-chunks&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 多页面cdn添加</span></span>
<span class="line"><span style="color: #E1E4E8">    Object.</span><span style="color: #B392F0">keys</span><span style="color: #E1E4E8">(pagesInfo).</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">page</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">`html-${</span><span style="color: #E1E4E8">page</span><span style="color: #9ECBFF">}`</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">tap</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">args</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// html中添加cdn</span></span>
<span class="line"><span style="color: #E1E4E8">        args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].cdn </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> cdn;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 修复 Lazy loading routes Error</span></span>
<span class="line"><span style="color: #E1E4E8">        args[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].chunksSortMode </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;none&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> args;</span></span>
<span class="line"><span style="color: #E1E4E8">      });</span></span>
<span class="line"><span style="color: #E1E4E8">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 压缩图片</span></span>
<span class="line"><span style="color: #E1E4E8">      config.module</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">test</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">(png</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">jpe</span><span style="color: #F97583">?</span><span style="color: #DBEDFF">g</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">gif</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">svg)(</span><span style="color: #85E89D; font-weight: bold">\?</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;image-webpack-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">loader</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;image-webpack-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">        .</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">          mozjpeg: { progressive: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, quality: </span><span style="color: #79B8FF">65</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          optipng: { enabled: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          pngquant: { quality: [</span><span style="color: #79B8FF">0.65</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">0.90</span><span style="color: #E1E4E8">], speed: </span><span style="color: #79B8FF">4</span><span style="color: #E1E4E8"> },</span></span>
<span class="line"><span style="color: #E1E4E8">          gifsicle: { interlaced: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8"> }</span></span>
<span class="line"><span style="color: #E1E4E8">        });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 打包分析</span></span>
<span class="line"><span style="color: #E1E4E8">      config.</span><span style="color: #B392F0">plugin</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;webpack-report&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(BundleAnalyzerPlugin, [</span></span>
<span class="line"><span style="color: #E1E4E8">        {</span></span>
<span class="line"><span style="color: #E1E4E8">          analyzerMode: </span><span style="color: #9ECBFF">&quot;static&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      ]);</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 使用svg组件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">svgRule</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule.uses.</span><span style="color: #B392F0">clear</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule.exclude.</span><span style="color: #B392F0">add</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">node_modules</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    svgRule</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">test</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">svg</span><span style="color: #F97583">$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">use</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg-sprite-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">loader</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;svg-sprite-loader&quot;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">      .</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">        symbolId: </span><span style="color: #9ECBFF">&quot;icon-[name]&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      });</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">imagesRule</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">    imagesRule.exclude.</span><span style="color: #B392F0">add</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;src/icons&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #E1E4E8">    config.module.</span><span style="color: #B392F0">rule</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;images&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">test</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">(png</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">jpe</span><span style="color: #F97583">?</span><span style="color: #DBEDFF">g</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">gif</span><span style="color: #F97583">|</span><span style="color: #DBEDFF">svg)(</span><span style="color: #85E89D; font-weight: bold">\?</span><span style="color: #79B8FF">.</span><span style="color: #F97583">*</span><span style="color: #DBEDFF">)</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> config;</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  pages,</span></span>
<span class="line"><span style="color: #E1E4E8">  css: {</span></span>
<span class="line"><span style="color: #E1E4E8">    extract: </span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    sourceMap: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    loaderOptions: {</span></span>
<span class="line"><span style="color: #E1E4E8">      scss: {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders</span></span>
<span class="line"><span style="color: #E1E4E8">        prependData: </span><span style="color: #9ECBFF">`</span></span>
<span class="line"><span style="color: #9ECBFF">          @import &quot;@scss/variables.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">          @import &quot;@scss/mixins.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">          @import &quot;@scss/function.scss&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">          $src: &quot;${</span><span style="color: #E1E4E8">process</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">env</span><span style="color: #9ECBFF">.</span><span style="color: #79B8FF">VUE_APP_BASE_API</span><span style="color: #9ECBFF">}&quot;;</span></span>
<span class="line"><span style="color: #9ECBFF">          `</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  lintOnSave: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  runtimeCompiler: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 是否使用包含运行时编译器的 Vue 构建版本</span></span>
<span class="line"><span style="color: #E1E4E8">  productionSourceMap: </span><span style="color: #F97583">!</span><span style="color: #79B8FF">IS_PROD</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生产环境的 source map</span></span>
<span class="line"><span style="color: #E1E4E8">  parallel: </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;os&quot;</span><span style="color: #E1E4E8">).</span><span style="color: #B392F0">cpus</span><span style="color: #E1E4E8">().</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  pwa: {},</span></span>
<span class="line"><span style="color: #E1E4E8">  devServer: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// overlay: { // 让浏览器 overlay 同时显示警告和错误</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   warnings: true,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">//   errors: true</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// },</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// open: false, // 是否打开浏览器</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// host: &quot;localhost&quot;,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// port: &quot;8080&quot;, // 代理断就</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// https: false,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// hotOnly: false, // 热更新</span></span>
<span class="line"><span style="color: #E1E4E8">    proxy: {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #9ECBFF">&quot;/api&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">        target:</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #9ECBFF">&quot;https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 目标代理接口地址</span></span>
<span class="line"><span style="color: #E1E4E8">        secure: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        changeOrigin: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 开启代理，在本地创建一个虚拟服务端</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// ws: true, // 是否启用websockets</span></span>
<span class="line"><span style="color: #E1E4E8">        pathRewrite: {</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #9ECBFF">&quot;^/api&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;/&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>

<hr>
<p>文章来源:<a target="_blank" rel="noopener" href="https://github.com/staven630/vue-cli4-config">github文章:vue-cli4 全面配置</a></p>

    
  </article>

  
      
    <div class="nexmoe-post-copyright">
        <strong>本文作者：</strong>staven630<br>
        
            <strong>文章来源：</strong><a href="https://github.com/staven630/vue-cli4-config" title="https:&#x2F;&#x2F;github.com&#x2F;staven630&#x2F;vue-cli4-config" target="_blank" rel="noopener">https:&#x2F;&#x2F;github.com&#x2F;staven630&#x2F;vue-cli4-config</a><br>
        
        <strong>本文链接：</strong><a href="https://www.tangyuxian.com/2021/04/13/%E5%89%8D%E7%AB%AF/webpack/webpack-vueCli4%20%E5%85%A8%E9%9D%A2%E9%85%8D%E7%BD%AE/" title="https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2021&#x2F;04&#x2F;13&#x2F;%E5%89%8D%E7%AB%AF&#x2F;webpack&#x2F;webpack-vueCli4%20%E5%85%A8%E9%9D%A2%E9%85%8D%E7%BD%AE&#x2F;" target="_blank" rel="noopener">https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2021&#x2F;04&#x2F;13&#x2F;%E5%89%8D%E7%AB%AF&#x2F;webpack&#x2F;webpack-vueCli4%20%E5%85%A8%E9%9D%A2%E9%85%8D%E7%BD%AE&#x2F;</a><br>

        
            <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可

        
    </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
   
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/webpack/" rel="tag">webpack</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/%E8%BD%AC%E8%BD%BD/" rel="tag">转载</a>
    
</div>
  
  
    <script async src="/js/copy-codeblock.js?v=1763992123962"></script>
  

  
      <div class="nexmoe-post-footer">
          <div class="valine"></div>
<script src='https://lib.baomitu.com/valine/1.3.9/Valine.min.js'></script>
<script>
  new Valine({
      el: '.valine',
      appId: 'r5zxC0st0DDjPA9auXzMV7HY-gzGzoHsz',
      appKey: '3bqCsovpyfTPHUzTHovd3V3V'
  })
</script>

      </div>
  
</div></div><div class="nexmoe-post-right">    <div class="nexmoe-fixed">
        <div class="nexmoe-tool">

            

            
            
            <button class="mdui-fab catalog" style="overflow:unset;">
                <i class="nexmoefont icon-i-catalog"></i>
                <div class="nexmoe-toc">
                    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#vue-cli4-%E5%85%A8%E9%9D%A2%E9%85%8D%E7%BD%AE"><span class="toc-number">1.</span> <span class="toc-text">vue-cli4 全面配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E9%85%8D%E7%BD%AE%E5%A4%9A%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F"><span class="toc-number">1.0.1.</span> <span class="toc-text">✅ 配置多环境变量</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE"><span class="toc-number">1.0.1.0.1.</span> <span class="toc-text">配置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F"><span class="toc-number">1.0.1.0.2.</span> <span class="toc-text">使用环境变量</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E9%85%8D%E7%BD%AE%E5%9F%BA%E7%A1%80-vue-config-js"><span class="toc-number">1.0.2.</span> <span class="toc-text">✅ 配置基础 vue.config.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E4%BF%AE%E5%A4%8D-HMR-%E7%83%AD%E6%9B%B4%E6%96%B0-%E5%A4%B1%E6%95%88"><span class="toc-number">1.0.3.</span> <span class="toc-text">✅ 修复 HMR(热更新)失效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E4%BF%AE%E5%A4%8D-Lazy-loading-routes-Error%EF%BC%9A-Cyclic-dependency-https-github-com-vuejs-vue-cli-issues-1669"><span class="toc-number">1.0.4.</span> <span class="toc-text">✅ 修复 Lazy loading routes Error： Cyclic dependency https:&#x2F;&#x2F;github.com&#x2F;vuejs&#x2F;vue-cli&#x2F;issues&#x2F;1669</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E6%B7%BB%E5%8A%A0%E5%88%AB%E5%90%8D-alias"><span class="toc-number">1.0.5.</span> <span class="toc-text">✅ 添加别名 alias</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%8E%BB%E9%99%A4%E5%A4%9A%E4%BD%99%E6%97%A0%E6%95%88%E7%9A%84-css"><span class="toc-number">1.0.6.</span> <span class="toc-text">✅ 去除多余无效的 css</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E6%B7%BB%E5%8A%A0%E6%89%93%E5%8C%85%E5%88%86%E6%9E%90"><span class="toc-number">1.0.7.</span> <span class="toc-text">✅ 添加打包分析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%89%93%E5%8C%85-multi-page"><span class="toc-number">1.0.8.</span> <span class="toc-text">✅ 多页面打包 multi-page</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%88%A0%E9%99%A4-moment-%E8%AF%AD%E8%A8%80%E5%8C%85"><span class="toc-number">1.0.9.</span> <span class="toc-text">✅ 删除 moment 语言包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%8E%BB%E6%8E%89-console-log"><span class="toc-number">1.0.10.</span> <span class="toc-text">✅ 去掉 console.log</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%9A%E4%BD%BF%E7%94%A8-babel-plugin-transform-remove-console-%E6%8F%92%E4%BB%B6"><span class="toc-number">1.0.10.0.1.</span> <span class="toc-text">方法一：使用 babel-plugin-transform-remove-console 插件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C%EF%BC%9A"><span class="toc-number">1.0.10.0.2.</span> <span class="toc-text">方法二：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A9%E7%94%A8-splitChunks-%E5%8D%95%E7%8B%AC%E6%89%93%E5%8C%85%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97"><span class="toc-number">1.0.11.</span> <span class="toc-text">利用 splitChunks 单独打包第三方模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%BC%80%E5%90%AF-gzip-%E5%8E%8B%E7%BC%A9"><span class="toc-number">1.0.12.</span> <span class="toc-text">✅ 开启 gzip 压缩</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%BC%80%E5%90%AF-stylelint-%E6%A3%80%E6%B5%8Bscss-css%E8%AF%AD%E6%B3%95"><span class="toc-number">1.0.13.</span> <span class="toc-text">✅ 开启 stylelint 检测scss, css语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E4%B8%BA-sass-%E6%8F%90%E4%BE%9B%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%EF%BC%8C%E4%BB%A5%E5%8F%8A%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="toc-number">1.0.14.</span> <span class="toc-text">✅ 为 sass 提供全局样式，以及全局变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E4%B8%BA-stylus-%E6%8F%90%E4%BE%9B%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="toc-number">1.0.15.</span> <span class="toc-text">✅ 为 stylus 提供全局变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E6%B8%B2%E6%9F%93-prerender-spa-plugin"><span class="toc-number">1.0.16.</span> <span class="toc-text">预渲染 prerender-spa-plugin</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%B8%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%84%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89-title%E3%80%81description%E3%80%81content"><span class="toc-number">1.0.16.0.1.</span> <span class="toc-text">为自定义预渲染页面添加自定义 title、description、content</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E6%B7%BB%E5%8A%A0-IE-%E5%85%BC%E5%AE%B9"><span class="toc-number">1.0.17.</span> <span class="toc-text">✅ 添加 IE 兼容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E8%87%AA%E5%8A%A8%E6%89%93%E5%8C%85%E4%B8%8A%E4%BC%A0%E9%98%BF%E9%87%8C-oss%E3%80%81%E5%8D%8E%E4%B8%BA-obs"><span class="toc-number">1.0.18.</span> <span class="toc-text">✅ 静态资源自动打包上传阿里 oss、华为 obs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E2%9C%85-%E5%AE%8C%E6%95%B4%E9%85%8D%E7%BD%AE"><span class="toc-number">1.0.19.</span> <span class="toc-text">✅ 完整配置</span></a></li></ol></li></ol></li></ol>
                </div>
            </button>
            

            

            <a href="#nexmoe-content" class="backtop toc-link" aria-label="Back To Top" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
        </div>
    </div>
</div></div><div id="nexmoe-pendant"><div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
    
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<script>
        // ----- Variable declaration

        var data = {
                dt: new Date(),
                hours: {
                        el: document.querySelector('#hours'),
                        val: 0 },

                minutes: {
                        el: document.querySelector('#minutes'),
                        val: 0 },

                seconds: {
                        el: document.querySelector('#seconds'),
                        val: 0 },

                renderTime: 1000 };


        // ----- Clock rendering logic

        updateTime = () => {
                let hour = data.dt.getHours();
                let minute = data.dt.getMinutes();
                let second = data.dt.getSeconds();

                data.hours.el.classList.add('moving');
                data.minutes.el.classList.add('moving');
                data.seconds.el.classList.add('moving');

                data.hours.val = hour == 0 && data.hours.val == 59 * 6 * 5 ? 360 : hour * 6 * 5;
                data.minutes.val = minute == 0 && data.minutes.val == 59 * 6 ? 360 : minute * 6;
                data.seconds.val = second == 0 && data.seconds.val == 59 * 6 ? 360 : second * 6;

                data.hours.el.style.transform = `translate(-50%, -75%) rotate(${data.hours.val}deg)`;
                data.minutes.el.style.transform = `translate(-50%, -75%) rotate(${data.minutes.val}deg)`;
                data.seconds.el.style.transform = `translate(-50%, -75%) rotate(${data.seconds.val}deg)`;

                data.dt.setSeconds(second + 1);
        };

        // ----- Clock execution

        setInterval(() => {
                updateTime();
        }, data.renderTime);

        updateTime();

        // ----- Events area

        data.seconds.el.addEventListener('transitionend', () => {
                data.hours.el.classList.remove('moving');
                data.minutes.el.classList.remove('moving');
                data.seconds.el.classList.remove('moving');

                // if (data.hours.val == 360) {
                //   data.hours.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                // }

                if (data.minutes.val == 360) {
                        data.minutes.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }

                if (data.seconds.val == 360) {
                        data.seconds.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }
        });

</script>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw var(--color-primary);
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw var(--color2);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .clock_logo{
            width: 10vw;
            height: 10vw;
            max-width: 10vh;
            max-height: 10vh;
            position: absolute;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            background-image: var(--clock-logo);
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh var(--color-primary);
            box-shadow: 0 1.4vh 2.8vh var(--color2);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard">
        <iframe allowtransparency="true" frameborder="0" width="304" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=1&t=0&v=0&d=2&bd=0&k=000000&f=ff8040&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=300&h=96&align=center"></iframe>
    </div>
    <div class="qweather-logo">

    </div>
</div>
<style>
    .qweather{
        position: relative;
        padding-right: 5px;
    }
    .qweather #he-plugin-standard {
        border: 2px solid var(--color-primary);
        box-shadow: 0 1px 0 0 var(--color-primary), 0 1px 2px 0 var(--color-primary);
        border-radius: 8px;
        width: 300px;
        overflow: hidden;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-image: var(--qweather-logo);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>

            </div>
        
    
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    #nexmoe-pendant .mdui-drawer{
        width: 305px;
    }
    @media screen and (max-width: 1600px) {
        #nexmoe-pendant {
            display: none
        }
    }
</style>
</div><div id="nexmoe-footer"><!--!--></div><div id="nexmoe-search-space"><div class="search-container"><div class="search-header"><div class="search-input-container"><input class="search-input" type="text" placeholder="搜索" onInput="sinput();"></div><a class="search-close" onclick="sclose();">×</a></div><div class="search-body"></div></div></div><div></div><!-- hexo injector body_end start -->
<script src="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js"></script>

  <script>
  const CODE_CONFIG = {
    beautify: true,
    highlightCopy: true,
    highlightLang: true,
    highlightHeightLimit: null,
    isHighlightShrink: false,
    copy: {
      success: 'Copy Success',
      error: 'Copy Error',
      noSupport: 'Browser Not Support',
    }
  };
  console.log(
    `%c hexo-shiki-plugin %c v1.0.27 %c https://github.com/nova1751/hexo-shiki-plugin`,
    "color: #fff; background: #5f5f5f",
    "color: #fff; background: #80c8f8",
    ""
  );
  </script>
  <!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/xiaomai.model.json"},"display":{"position":"left","width":200,"height":500},"mobile":{"show":false},"react":{"opacity":0.9},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>